<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>物料列表</title>
    <!-- web路径：
    不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
    以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
            http://localhost:3306/crud
     -->
    <script type="text/javascript"
            src="./static/js/jquery-1.12.4.min.js"></script>
    <link
            href="./static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
            rel="stylesheet">
    <script src="./static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="./static/laydate/laydate.js"></script>
</head>
<body>
<!-- 物料修改的模态框 -->
<div class="modal fade" id="itemUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">物料修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">物料编码</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="itemCode_update_static"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">物料描述</label>
                        <div class="col-sm-10">
                            <input type="text" name="itemDescription" class="form-control"
                                   id="itemDescription_update_input" placeholder="itemDescription">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">物料单位</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="itemUom" id="itemUom_update_input">
                                <option value="米">米</option>
                                <option value="平方米">平方米</option>
                                <option value="立方米">立方米</option>
                                <option value="千克">千克</option>
                                <option value="个">个</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">生效时间从</label>
                        <div class="col-sm-10">
                            <input type="text" name="startActiveDate" class="form-control date-input"
                                   id="startActiveDate_update_input" placeholder="startActiveDate">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">生效时间至</label>
                        <div class="col-sm-10">
                            <input type="text" name="endActiveDate" class="form-control date-input"
                                   id="endActiveDate_update_input" placeholder="endActiveDate">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">是否启用</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="enabledFlag" id="enabeldFlage_update_input">
                                <option value="true">是</option>
                                <option value="false">否</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="item_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>


<!-- 物料添加的模态框 -->
<div class="modal fade" id="itemAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">物料添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">物料描述</label>
                        <div class="col-sm-10">
                            <input type="text" name="itemDescription" class="form-control"
                                   id="itemDescription_add_input" placeholder="itemDescription">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">物料单位</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="itemUom">
                                <option value="米">米</option>
                                <option value="平方米">平方米</option>
                                <option value="立方米">立方米</option>
                                <option value="千克">千克</option>
                                <option value="个">个</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">生效时间从</label>
                        <div class="col-sm-10">
                            <input type="text" name="startActiveDate" class="form-control date-input"
                                   id="startActiveDate_add_input" placeholder="startActiveDate">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">生效时间至</label>
                        <div class="col-sm-10">
                            <input type="text" name="endActiveDate" class="form-control date-input"
                                   id="endActiveDate_add_input" placeholder="endActiveDate">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">是否启用</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="enabledFlag">
                                <option value="true">是</option>
                                <option value="false">否</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="item_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- 搭建显示页面 -->
<div class="container">
    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12">
            <h1>物料管理</h1>
        </div>
    </div>
    <!-- 搜索 -->
    <form id="itemSearch">
        <div class="col-md-4 form-group">
            <label for="exampleI2nputName2">物料编码</label>
            <input type="text" name="itemCode" class="form-control" id="exampleI2nputName2">
        </div>
        <div class="col-md-4 form-group">
            <label for="exampleIn3putEmail2">物料描述</label>
            <input type="text" name="itemDescription" class="form-control" id="exampleIn3putEmail2">
        </div>
        <div class="col-md-4 form-group">
            <label for="exampleI3nputName2">生效时间从</label>
            <input type="text" name="startActiveDate" class="form-control date-input" id="exampleI3nputName2">
        </div>
        <div class="col-md-4 form-group">
            <label for="exam3pleInputName2">生效时间至</label>
            <input type="text" name="endActiveDate" class="form-control date-input" id="exam3pleInputName2">
        </div>
        <div class="col-md-4 form-group">
            <label for="exampleIn3utName2">物料单位</label>
            <select class="form-control" name="itemUom" id="exampleIn3utName2">
                <option value=""></option>
                <option value="米">米</option>
                <option value="平方米">平方米</option>
                <option value="立方米">立方米</option>
                <option value="千克">千克</option>
                <option value="个">个</option>
                <option value="其他">其他</option>
            </select>
        </div>
        <div class="col-md-4 form-group">
            <label for="exa3mpleInputName2">是否启用</label>
            <select class="form-control" name="enabledFlag" id="exa3mpleInputName2">
                <option value=""></option>
                <option value="true">是</option>
                <option value="false">否</option>
            </select>
        </div>
        <div class="col-md-2  form-group">
            <select class="form-control" name="size" id="page_size">
                <option value="10">10条/页</option>
                <option value="20">20条/页</option>
                <option value="40">40条/页</option>
                <option value="80">80条/页</option>
            </select>
        </div>
        <div class="col-md-2  form-group">
            <select class="form-control" name="order" id="order">
                <option value="">排序</option>
                <option value="item_code">物料编码</option>
                <option value="item_description">物料描述</option>
                <option value="item_uom">物料单位</option>
                <option value="start_active_date">生效时间从</option>
                <option value="end_active_date">生效时间至</option>
                <option value="enabled_flag">是否启用</option>
            </select>
        </div>
        <div class="col-md-4 form-group">
            <button type="button" class="btn btn-primary" id="item_search_btn">查询</button>
            <button type="reset" class="btn btn-default">重置</button>
        </div>
        <div class="col-md-4  form-group">
            <button type="button" class="btn btn-primary" id="item_add_modal_btn">新增</button>
            <button type="button" class="btn btn-danger" id="item_delete_all_btn">删除</button>
            <a  class="btn btn-info" id="export_excel" href="./excel/item">导出</a>
        </div>
    </form>


    <!-- 显示表格数据 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="items_table">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="check_all"/>
                    </th>
                    <th>物料编码</th>
                    <th>物料描述</th>
                    <th>物料单位</th>
                    <th>生效时间从</th>
                    <th>生效时间至</th>
                    <th>是否启用</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>

    <!-- 显示分页信息 -->
    <div class="row ">
        <!--分页文字信息  -->
        <div class="col-md-4" id="page_info_area"></div>
        <!-- 分页条信息 -->
        <div class="col-md-4" id="page_nav_area">
        </div>
    </div>

</div>
<script type="text/javascript">
    lay('.date-input').each(function () {
        laydate.render({
            elem: this
            , trigger: 'click'
        });
    });

    function getContextPath() {
        var pathName = document.location.pathname;
        var index = pathName.substr(1).indexOf("/");
        var result = pathName.substr(0, index + 1);
        return result;
    }

    var totalRecord, currentPage;
    var pageSize = 10;
    //1、页面加载完成以后，直接去发送ajax请求,要到分页数据
    $(function () {
        //去首页
        to_page(1);
    });

    function to_page(page) {
        $.ajax({
            url: "./item",
            data: "page=" + page +  "&" + $("#itemSearch").serialize(),
            type: "GET",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            success: function (result) {
                //console.log(result);
                //1、解析并显示物料数据
                build_items_table(result);
                //2、解析并显示分页信息
                build_page_info(result);
                //3、解析显示分页条数据
                build_page_nav(result);
            }
        });
    }

    function build_items_table(result) {
        //清空table表格
        $("#items_table tbody").empty();
        var items = result.list;
        $.each(items, function (index, item) {
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
            var itemCode = $("<td></td>").append(item.itemCode);
            var itemDescription = $("<td></td>").append(item.itemDescription);
            var itemUom = $("<td></td>").append(item.itemUom);
            var startActiveDate = $("<td></td>").append(item.startActiveDate);
            var endActiveDate = $("<td></td>").append(item.endActiveDate);
            var enabledFlag = $("<td></td>").append(item.enabledFlag ? "是" : "否");
            /**
             <button class="">
             <span class="" aria-hidden="true"></span>
             编辑
             </button>
             */
            var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
            //为编辑按钮添加一个自定义的属性，来表示当前物料id
            editBtn.attr("edit-id", item.itemId);
            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
            //为删除按钮添加一个自定义的属性来表示当前删除的物料id
            delBtn.attr("del-id", item.itemId);
            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
            //var delBtn =
            //append方法执行完成以后还是返回原来的元素
            $("<tr></tr>").append(checkBoxTd)
                .append(itemCode)
                .append(itemDescription)
                .append(itemUom)
                .append(startActiveDate)
                .append(endActiveDate)
                .append(enabledFlag)
                .append(btnTd)
                .appendTo("#items_table tbody");
        });
    }

    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area").append("当前" + result.pageNum + "页,总" +
            result.pages + "页,总" +
            result.total + "条记录");
        totalRecord = result.total;
        currentPage = result.pageNum;
    }

    //解析显示分页条，点击分页要能去下一页....
    function build_page_nav(result) {
        //page_nav_area
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");

        //构建元素
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if (result.hasPreviousPage == false) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            //为元素添加点击翻页的事件
            firstPageLi.click(function () {
                to_page(1);
            });
            prePageLi.click(function () {
                to_page(result.pageNum - 1);
            });
        }


        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
        if (result.hasNextPage == false) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            nextPageLi.click(function () {
                to_page(result.pageNum + 1);
            });
            lastPageLi.click(function () {
                to_page(result.pages);
            });
        }


        //添加首页和前一页 的提示
        ul.append(firstPageLi).append(prePageLi);
        //1,2，3遍历给ul中添加页码提示
        $.each(result.navigatepageNums, function (index, item) {

            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if (result.pageNum == item) {
                numLi.addClass("active");
            }
            numLi.click(function () {
                to_page(item);
            });
            ul.append(numLi);
        });
        //添加下一页和末页 的提示
        ul.append(nextPageLi).append(lastPageLi);

        //把ul加入到nav
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

    //清空表单样式及内容
    function reset_form(ele) {
        $(ele)[0].reset();
        //清空表单样式
        $(ele).find("*").removeClass("has-error has-success");
        $(ele).find(".help-block").text("");
    }


    //点击新增按钮弹出模态框。
    $("#item_add_modal_btn").click(function () {
        //清除表单数据（表单完整重置（表单的数据，表单的样式））
        reset_form("#itemAddModal form");
        $("#itemAddModal").modal({
            backdrop: "static"
        });
    });
    function arrayToJson(formArray) {
        var dataArray = {};
        $.each(formArray, function () {
            if (dataArray[this.name]) {
                if (!dataArray[this.name].push) {
                    dataArray[this.name] = [dataArray[this.name]];
                }
                dataArray[this.name].push(this.value || '');
            } else {
                dataArray[this.name] = this.value || '';
            }
        });
        return JSON.stringify(dataArray);
    }

    $("#item_search_btn").click(function () {
        pageSize = $("#page_size").val();
        to_page(1);
    });

    //点击保存，保存物料。
    $("#item_save_btn").click(function () {
        var date = $("#itemAddModal form").serializeArray()
        //console.log(arrayToJson(date))
        $.ajax({
            url: "./item",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            data: arrayToJson(date),
            success: function (result) {
                $("#itemAddModal").modal('hide');
                to_page(totalRecord);
            },
        });
    });

    $(document).on("click", ".edit_btn", function () {
        getItem($(this).attr("edit-id"));
        $("#item_update_btn").attr("edit-id", $(this).attr("edit-id"));
        $("#itemUpdateModal").modal({
            backdrop: "static"
        });
    });

    function getItem(id) {
        $.ajax({
            url: "./item/" + id,
            type: "GET",
            success: function (result) {
                //console.log(result);
                //var empData = result.extend.emp;
                $("#itemCode_update_static").text(result.itemCode);
                $("#itemUom_update_input select").val(result.itemUom);
                $("#itemDescription_update_input").val(result.itemDescription);
                $("#startActiveDate_update_input").val(result.startActiveDate);
                $("#endActiveDate_update_input").val(result.endActiveDate);
                $("#enabeldFlage_update_input select").val(result.enabledFlag);
            }
        });
    }

    //点击更新，更新物料信息
    $("#item_update_btn").click(function () {
        $.ajax({
            url: "./item/" + $(this).attr("edit-id"),
            type: "PUT",
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            data: arrayToJson($("#itemUpdateModal form").serializeArray()),
            success: function (result) {
                //alert(result.msg);
                //1、关闭对话框
                $("#itemUpdateModal").modal("hide");
                //2、回到本页面
                to_page(currentPage);
            }
        });
    });

    //单个删除
    $(document).on("click", ".delete_btn", function () {
        //1、弹出是否确认删除对话框
        var itemCode = $(this).parents("tr").find("td:eq(1)").text();
        var itemId = $(this).attr("del-id");
        //alert($(this).parents("tr").find("td:eq(1)").text());
        if (confirm("确认删除编码为【" + itemCode + "】的物料吗？")) {
            //确认，发送ajax请求删除即可
            $.ajax({
                url: "./item/" + itemId,
                type: "DELETE",
                success: function (result) {
                    //alert(result);
                    //回到本页
                    to_page(currentPage);
                }
            });
        }
    });

    //完成全选/全不选功能
    $("#check_all").click(function () {
        //attr获取checked是undefined;
        //我们这些dom原生的属性；attr获取自定义属性的值；
        //prop修改和读取dom原生属性的值
        $(".check_item").prop("checked", $(this).prop("checked"));
    });

    //check_item
    $(document).on("click", ".check_item", function () {
        //判断当前选择中的元素是否5个
        var flag = $(".check_item:checked").length == $(".check_item").length;
        $("#check_all").prop("checked", flag);
    });

    //点击全部删除，就批量删除
    $("#item_delete_all_btn").click(function () {
        //
        var itemCode = "";
        var del_idList = new Array();
        $.each($(".check_item:checked"), function () {
            //this
            itemCode += $(this).parents("tr").find("td:eq(1)").text() + ",";
            //组装id
            del_idList.push($(this).parents("tr").find("button:eq(0)").attr("edit-id"));
        });
        if (confirm("确认删除编码为【" + itemCode + "】的物料吗？")) {
            //发送ajax请求删除
            $.ajax({
                url: "./item",
                type: "DELETE",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                data: JSON.stringify(del_idList),
                success: function (result) {
                    //alert(result.msg);
                    //回到当前页面
                    to_page(currentPage);
                }
            });
        }
    });
</script>
</body>
</html>